<template>
    <div class="detail-p">
        <div style="height:50px;"></div>
        <div class="card">
            <el-breadcrumb separator="/" class="card-body">
                <el-breadcrumb-item :to="{ path: '/ProcessConsole' }">一体化流程</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">新员工入网申请</div>
            <div class="card-body">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
                    <div class="info-ruleForm">
                        <el-form-item label="申请人" prop="applyUserName">
                            <el-input v-model="ruleForm.applyUserName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="申请日期" prop="time">
                            <el-input v-model="ruleForm.applyTime" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="部门" prop="departmentName">
                            <el-input v-model="ruleForm.departmentName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="房间号" prop="roomNum">
                            <el-input v-model="ruleForm.roomNum" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="mobile">
                            <el-input v-model="ruleForm.mobile" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="预装软件列表">
                            <el-checkbox-group v-model="ruleForm.softList" class="authList" disabled>
                                <el-checkbox :label="i" :name="i" v-for="i in ruleForm.softList" :key="i.index"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="其他软件" prop="otherSoftware">
                            <el-input v-model="ruleForm.otherSoftware" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="申请理由" prop="applyReason">
                            <el-input type="textarea" v-model="ruleForm. applyReason" disabled></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <hr v-if="this.$route.query.type=='a'">
                <div class="info-ruleForm" v-if="this.$route.query.type=='a'">
                    <el-form ref="form" :model="ruleForm" label-width="80px">
                        <el-form-item label="意见">
                            <el-radio-group v-model="ruleForm.opinion">
                                <el-radio label="true" >同意申请</el-radio>
                                <el-radio label="false" >拒绝申请</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="填写理由">
                            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm()">提交流程</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <hr>
                <div class="info-ruleForm time-line-wrap">
                    <h2>申请状态</h2>
                    <div class="time-line">
                        <div class="line-item" v-for="item in ruleForm.historicActivityInstanceList" :key="item.index">
                              <time>{{ item.startTime | FormatTime_yydd }}<br/>{{ item.startTime | FormatTime_hhmm }}</time>
                            <div class="line-con">
                                <h4>资产操作类型: {{ item.activityName }}</h4>
                                <p><strong>操作人：{{ item.assigneeId }}</strong></p>
                                <p>备注:{{item.remark}}</p>
                                <p>历时：{{item.durationInMillis}}ms</p>
                      
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 隐藏查找窗口 -->
        <el-dialog title="查找部门" :visible.sync="dialogVisible" :append-to-body='true' width="300px">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import request from "@/utils/request";
import { SET_TIME_YYMM, SET_TIME_HHMM } from "@/utils/formatTime.js";
export default {
  name: "addUser",
  data() {
    return {
      activities2: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more"
        },
        {
          content: "支持自定义颜色",
          timestamp: "2018-04-03 20:46",
          color: "#0bbd87"
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03 20:46",
          size: "large"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03 20:46"
        }
      ],
      ruleForm: {
        opinion: "",
        remark: "",
        applyUserName: "王小虎",
        applyTime: "2019年4月 11日",
        departmentName: "研发部",
        roomNum: "3-0001",
        mobile: "15008421656",
        otherSoftware: "百度输入法 , QQ , 微信",
        applyReason: "研发需要,请批准",
        softList: [
          "word",
          "Xmind",
          "CORD DROW",
          "windows10 pro",
          "汉语词典",
          "PAYPAY",
          "Phontshop",
          "金山顿卡",
          "天行之窗应用",
          "Ceont OS7.6"
        ],
        historicActivityInstanceList: [
          {
            activityName: "",
            startTime: "",
            endTime: "",
            assigneeId: "",
            assigneeName: "",
            durationInMillis: "",
            content: "导入了设备",
            remark: ""
          }
        ]
      },
      imageUrl: "",
      dialogVisible: false,
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    submitForm() {
      // alert("提交流程成功!即将回到首页!");
      console.log(this.ruleForm);
      request({
        url: this.$api.completeFlow,
        method: "post",
        data: this.ruleForm
      }).then(res => {
        if (res.code === "000000") {
          console.log(res);
          this.$router.go(-1);
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    getDetail() {
      var _this = this;
      console.log(this.$route.query.id);
      request({
        url: this.$api.getFlowDetail + "?id=" + this.$route.query.id,
        method: "get"
        // data: {id:this.$route.query.id},
      }).then(res => {
        if (res.code === "000000") {
          console.log(res);
          this.ruleForm = res.data;
          this.ruleForm.softList = res.data.preInstalledSoftware.split(";");
        }
      });
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    document.body.className = "con-bg";
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    document.body.className = "";
    next();
  },
  mounted() {
    this.getDetail();
  },
  activated() {
    this.getDetail();
  },
  filters: {
    FormatTime_yydd: function(time) {
      if (time == "") {
        return "No Time!";
      } else {
        return SET_TIME_YYMM(time);
      }
    },
    FormatTime_hhmm: function(time) {
      if (time == "") {
        return "No Time!";
      } else {
        return SET_TIME_HHMM(time);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.info-ruleForm {
  width: 420px;
  margin: 0 auto;
  position: relative;
}

.authList {
  border: 1px solid #f2f2f2;
  padding: 0.5rem 1rem;
}
.el-query-tree {
  position: absolute;
  right: -40px;
  top: 0;
}
.detail-p {
  padding-top: 25px;
  width: 1200px;
  margin: 0 auto;
}
.time-line {
  padding-top: 20px;
  padding-bottom: 20px;
  h2 {
    font-size: 22px;
    text-align: center;
  }
}
</style>